<template>
  <div class="setting">
    <template v-if="tabType == 'data'">
      <div class="card">
        <div class="title">样式选择</div>
        <div class="content">
          <el-form-item label="菜单布局">
            <el-radio-group v-model="settingData.data.layout">
              <el-radio :label="1">图片+文字</el-radio>
              <el-radio :label="2">图片</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="列数">
            <el-radio-group v-model="settingData.data.col">
              <el-radio :label="3">3个</el-radio>
              <el-radio :label="4">4个</el-radio>
              <el-radio :label="5">5个</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="行数">
            <el-radio-group v-model="settingData.data.row">
              <el-radio :label="1">1行</el-radio>
              <el-radio :label="2">2行</el-radio>
              <el-radio :label="3">3行</el-radio>
            </el-radio-group>
          </el-form-item>
        </div>
      </div>
      <dc-list
        v-model="settingData.data.list"
        :itemProp="{
          src: '',
          isMp:0,
          mp:{
            path:'',
            appid:'',
            id:'',
          },
          title: {
            text: '',
            color: '#000',
          },
          url: '',
          badge: {
            show: 0,
            text: '',
            color: '#FFFFFF',
            bgColor: '#FF6000',
          },
        }"
      >
        <template #title>图标设置</template>
        <template #listItem="{ element }">
          <el-form-item label="图标">
            <div class="sa-flex">
              <sa-uploader v-model="element.src" fileType="image"></sa-uploader>
              <div class="tip">建议尺寸：98*98</div>
            </div>
          </el-form-item>
          <el-form-item label="标题">
            <dc-text-color
              v-model="element.title"
              placeholder="请输入标题"
              maxlength="5"
              show-word-limit
            ></dc-text-color>
          </el-form-item>
          <template v-if="element.isMp ==1">
            <el-form-item label="小程序路径">
              <el-input
                v-model="element.mp.path"
                placeholder="请输入小程序路径"
              ></el-input>
            </el-form-item>
            <el-form-item label="小程序appid">
              <el-input
                v-model="element.mp.appid"
                placeholder="请输入小程序appid"
              ></el-input>
            </el-form-item>
			<el-form-item label="小程序原始ID">
              <el-input
                v-model="element.mp.id"
                placeholder="请输入小程序原始ID"
              ></el-input>
            </el-form-item>
          </template>
          <el-form-item v-else label="链接">
            <dc-url v-model="element.url"></dc-url>
          </el-form-item>
          <el-form-item label="小程序">
            <el-switch v-model="element.isMp" :active-value="1" :inactive-value="0" />
          </el-form-item>
          <el-form-item label="标签">
            <el-switch v-model="element.badge.show" :active-value="1" :inactive-value="0" />
          </el-form-item>
          <template v-if="element.badge.show">
            <el-form-item label="标签内容">
              <dc-text-color
                v-model="element.badge"
                placeholder="请输入标签内容"
                maxlength="4"
                show-word-limit
              ></dc-text-color>
            </el-form-item>
            <el-form-item label="标签背景">
              <dc-color-picker v-model="element.badge.bgColor"></dc-color-picker>
            </el-form-item>
          </template>
        </template>
      </dc-list>
    </template>
  </div>
</template>

<script setup>
  import dcColorPicker from '../../common/dc-color-picker.vue';
  import dcList from '../../common/dc-list.vue';
  import dcUrl from '../../common/dc-url.vue';
  import dcTextColor from '../../common/dc-text-color.vue';

  const props = defineProps(['settingData', 'tabType']);
</script>
